<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <div>
          <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
          <span v-html="Data.Title" style="display:inline-block"></span>
          <el-input-number
            style="margin-left:10px"
            size="mini"
            v-if="Data.TitleBlank"
            @change="checkItem()"
            :controls="false"
            v-model="Data.BlankValue"
          ></el-input-number>
          <el-button
            @click="divvisibility(2)"
            type="text"
            style="float:right"
            v-if="!preview"
          >{{see}}</el-button>
        </div>
        <div v-if="visible" >
          <div class="option-area" style="margin: 5px;" v-if="!lixian" >
            <el-table :data="tabledata" style="width: 100%">
              <el-table-column fixed type="index" width="100" :index="GetRowTitleByIndex"></el-table-column>
              <el-table-column v-for="opt in columitem " :label="opt.optionId" :key="opt.optionId">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="opt.checkvalue[scope.$index]"
                    false-label="null"
                    :true-label="tabledata[scope.$index]"
                  >
                    <span/>
                    <el-input
                      v-model="opt.blankvalue[scope.$index]"
                      style="width:100px"
                      size="mini"
                      v-if="checkBlank(opt.optionId,tabledata[scope.$index])&&(opt.checkvalue[scope.$index]===tabledata[scope.$index])"
                    />
                  </el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 离线表格模式-->
          <div v-if="lixian">
            <table border="1px" cellspacing="0"  style="width: 50%">
              <tr>
                选项
                <td v-for="opt in Data.RowTitles" :key="opt.Title">{{opt.Title}}</td>
              </tr>
              <tr v-for="(opt,index) in Data.Options" :key="opt.itemName">
                <td>{{opt.itemName}}</td>
                <td v-for="opt in Data.RowTitles" :key="opt.Title">
                  {{index+1}}
                </td>
              </tr>
            </table>
          </div>
        </div> 
      </div>
    </div>

    <div id="editor" v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title" :Html="Data.Title"/>
        <el-row>
          <el-col :span="8">
            <el-card>
              <div style="padding: 14px;">
                <tr>
                  <td>
                    <span>行标题</span>
                  </td>
                </tr>
                <div>
                  <el-input
                    type="textarea"
                    @input="UpdateRowTitle"
                    v-model="Data.RowTitleText"
                    :rows="10"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-card style="margin-left:10px">
              <el-table :fit="true" :data="Data.Options" style="width: 100%">
                <el-table-column label="选项文字">
                  <template slot-scope="scope">
                    <div id="title-row">
                      <el-input
                        size="small"
                        style="display: inline-block;"
                        v-model="scope.row.itemName"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="允许填空">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.canFillBlank"></el-checkbox>
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div style="display: inline-block;margin-top: 5px;">
                      <el-button
                        type="warning"
                        @click="remove(scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-minus"
                        circle
                      ></el-button>
                      <el-button
                        type="danger"
                        @click="insert(scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-plus"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click="moveUp(scope.row.itemId)"
                        icon="el-icon-top"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click="moveDown(scope.row.itemId)"
                        icon="el-icon-bottom"
                        circle
                      ></el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <BatchAddComponent v-model="msg"></BatchAddComponent>
            </el-card>
          </el-col>
        </el-row>

        <el-button @click="show=!show" type="text">行列转置</el-button><el-button type="text" @click="lixian=!lixian">离线模式</el-button>
        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import TBaseQuestion from "./ts/TBaseQuestion";
import MatrixRadioSubject, {MatrixRadioOption} from "./ts/MatrixRadioSelSubject";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";
import DataTypeSelector from "./DataTypeSelector.vue";

import EditorComponent from "./EditorComponent.vue";
import OrderBy, { OrderByTypes } from "./ts/OrderByTypes";
import OrderByComponent from "./OderByComponent.vue";
import MatrixRowTitle from "./ts/MatrixRowTitle";
import IndexObj from "./ts/IndexObj";
import BatchAddComponent from "./BatchAddComponent.vue";
import { Alert } from "element-ui";
import { Option } from "element-ui/types/rate";

@Component({
  components: {
    EditorComponent,
    DataTypeSelector,
    OrderByComponent,
    BatchAddComponent
  }
})

// 矩阵单选组件
export default class MatrixMutiSelComponent extends TBaseQuestion<
  MatrixRadioOption,
  MatrixRadioSubject
> {
  public $name: string = "MatrixMutiSelComponent";
  public canEdit = true;

  chose = this.getarray();
  public msg = "";

  public gotMsg: string[] = [];
  public options: MatrixRadioOption[] = [];
  lixian=false;

  constructor() {
    super(MatrixRadioOption, MatrixRadioSubject);

    this.Data.DataType = QuestionDataTypes.dtText;
    this.Data.QuestionType = QuestionTypes.qtMatrixCheckBox;
    this.Data.Title = "矩阵多选题标题";

    for (let i: number = 0; i < 3; i++) {
      this.Data.RowTitles.push(new MatrixRowTitle(i, "标题" + (i + 1)));
    }

    this.Data.RowTitleText = this.ConvertTitleArrayToStr(this.Data.RowTitles);

    for (let i: number = 0; i < 5; ++i) {
      const opt = new MatrixRadioOption();
      opt.itemName = "选项" + i;
      for (let j: number = 0; j < this.Data.RowTitles.length; j++) {
        opt.BlankValues.push("");
      }
      this.Data.Options.push(opt);
    }
  }

  mounted() {
    super.mounted();
    this.initProps();
    console.info("component mounted!");
  }
  getarray() {
    let arr = new Array(30); //表格有10行
    for (var i = 0; i < arr.length; i++) {
      arr[i] = new Array<String>(30); //每行有10列
    }
    return arr;
  }
  @Watch("Data.RowTitles")
  watchData(newVal: Array<MatrixRowTitle>, oldVal: Array<MatrixRowTitle>) {
    console.log("RowTitle Changed:" + newVal);
    if (newVal == null) return;
    this.Data.RowTitleText = this.ConvertTitleArrayToStr(newVal);
  }
  @Watch("msg")
  public getstr() {
    console.log(this.msg);
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        const opt = new MatrixRadioOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }

  // 获取options中每一项的name
  public getOptionText(): string {
    let options = this.Data.Options[0].itemName + "\n";
    const n = this.Data.Options.length;
    for (let i = 1; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }

  // 输入框内容改变
  public inputchange() {
    this.msg = this.getOptionText();
  }
  // 删除选项
  public remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }
  // 插入选项
  public insert(id: string): void {
    const options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(MatrixRadioOption)
    );
    this.SetBlankValues();
    this.msg = this.getOptionText();
  } // 向上移动选项
  public moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  public moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }
  // 数组转为字符串
  public ConvertTitleArrayToStr(arry: MatrixRowTitle[]): string {
    const tempArray: string[] = [];
    for (const t of arry) {
      tempArray.push(t.Title);
    }

    return tempArray.join("\n");
  }

  public GetRowTitles(): string {
    return this.ConvertTitleArrayToStr(this.Data.RowTitles);
  }

  public getQuestionData(): any {
    return this.Data;
  }

  public setQuestionData(data: string) {} // 设置填空数组的长度
  public SetBlankValues(): void {
    for (const opt of this.Data.Options) {
      opt.BlankValues = [];

      for (let i = 0; i < this.Data.RowTitles.length; ++i) {
        opt.BlankValues.push("");
      }
    }
  }

  public getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  public setTitle(txt: string): void {
    console.info(txt);
  }

  public GetHtml(html: string): void {
    this.Data.Title = html;
  }

  public UpdateRowTitle(): void {
    const tempArray = this.Data.RowTitleText.split("\n");
    this.Data.RowTitles = [];
    let i = 0;
    for (const t of tempArray) {
      this.Data.RowTitles.push(new MatrixRowTitle(i, t));
      i++;
    }
    this.SetBlankValues();
  }

  public GetRowTitleByIndex(index: number): string {
    if (this.show === true) {
      return this.Data.RowTitles[index].Title;
    } else if (this.show === false) {
      return this.Data.Options[index].itemName;
    } else {
      return "";
    }
  }
  
  
  //行列转置
  @Watch("show")
  setdata() {
    super.setdata();
  }
  checkBlank(item: string, name: string) {
    if (this.show) {
      return this.Data.Options[
        this.Data.Options.findIndex(e => e.itemName == item)
      ].canFillBlank;
    } else {
      return this.Data.Options[
        this.Data.Options.findIndex(e => e.itemName == name)
      ].canFillBlank;
    }
  }
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;
  flex-flow: row wrap;
  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}
</style>
